<template>
  <div class="spike-wrapper">
    <div class="spike">
      <div class="time-skill">
        <img src="../assets/static/temp/secskill-img.jpg" alt="">
        <span>8点场</span>
      </div>
    </div>
    <div class="clothes-img">
      <div class="img-wrapper" v-for="(item, index) in imgs" :key="index" >
        <img :src="item.url" alt="">
        <div class="title">{{item.title}}</div>
        <div class="price">￥{{item.price}}</div>
      </div>
    </div>
  </div>
</template>

<script>
/**
* descripe:商品秒杀
* date: 2019-
* author: yezhanxiang
*/
  export default {
    data () {
      return {
        imgs: [
          {
            title: '古黛妃 短袖t恤女夏装2019新款韩版宽松',
            url: require("../assets/static/temp/show1.jpg"),
            price: 456
          }, {
            title: '潘歌针织连衣裙',
            url: require("../assets/static/temp/show2.jpg"),
            price: 354
          }, {
            title: '巧谷2019春夏季新品新款女装',
            url: require("../assets/static/temp/show3.jpg"),
            price: 645
          }, {
            title: '私萱连衣裙',
            url: require("../assets/static/temp/show4.jpg"),
            price: 995
          }, {
            title: '原宿风学生潮韩版春夏短',
            url: require("../assets/static/temp/show5.jpg"),
            price: 753
          }, {
            title: '潘歌针织连衣裙',
            url: require("../assets/static/temp/show2.jpg"),
            price: 354
          }
        ]
      }
    },
    components: {

    },
    watch: {

    },
    created () {

    },
    methods: {

    }
  }
</script >

<style lang='stylus' scoped>
.spike-wrapper
  background-color #fff
  margin-top .2rem
  padding 0 0.2rem
  .spike
    display flex
    height .9rem
    align-items center
    .time-skill
      display flex
      img
        width 1.4rem
        height 0.3rem
  .clothes-img
      display flex
      flex-wrap nowrap
      overflow-x scroll
      overflow-y hidden
      width 100%
      .img-wrapper
        display flex
        flex-direction column
        margin-right .2rem
        img 
          width 1.5rem
          height 1.5rem
        .title
          margin-top .1rem
          color: #b9b9b9;
          font-size: 13px;
          color: #303133;
          width 1.3rem
          overflow hidden
          white-space nowrap
          text-overflow ellipsis
        .price
          width 1.5rem
          margin-top .1rem
          text-align center
          color #fa436a
</style>
